<template>
  <!-- 详情 -->
  <el-drawer
    title="事件日志详情"
    v-model="visible"
    :size="800"
    :before-close="beforeClose"
  >
    <section style="margin-top: 0px">
      <div class="container">
        <h4 class="divider">基本信息</h4>
        <ul class="base-list">
          <li>
            <div class="li-inner">
              <span> 所属应用</span>
              <p :title="baseDetail.appName">
                {{ baseDetail.appName }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span> 状态</span>
              <p>{{ baseDetail.httpStatus }}</p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span>调用时长(ms)</span>
              <p>
                {{ baseDetail.requestUseTime }}
              </p>
            </div>
          </li>
          <li>
            <div class="li-inner">
              <span>请求时间</span>
              <p>
                {{ parseTime(baseDetail.requestTime) }}
              </p>
            </div>
          </li>
        </ul>
        <h4 class="divider">Header信息</h4>
        <div class="info-text">
          {{ baseDetail.reqHeaders }}
        </div>
        <h4 class="divider">Boby信息</h4>
        <div class="info-text">{{ baseDetail.requestBody }}</div>
      </div>
    </section>
  </el-drawer>
</template>
<script setup>
import { watch, ref, onMounted, reactive, computed, toRefs } from "vue";
import { parseTime } from "@/utils/index.js";
import { getAppEvtLogDetail } from "@/api/application.js";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  detailInfo: {
    type: Object,
    default: {},
  },
});

const emit = defineEmits();
const state = reactive({
  baseDetail: {},
});
const { baseDetail } = toRefs(state);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
}); // 是否显示该抽屉

const beforeClose = () => {
  visible.value = false;
};

onMounted(() => {
  // console.log("logId.value",logId.value);
});

const getLogDeatil = async (id) => {
  let { data } = await getAppEvtLogDetail(id);
  state.baseDetail = data;
};

watch(visible, (value) => {
  if (visible.value) {
    getLogDeatil(props.detailInfo.id);
  }
});
</script>

<style lang="scss" scoped>
.info-text {
  background: #f5f5f5;
  padding: 10px;
  color: #333;
  word-break: break-all;
}
ul.base-list {
  overflow: hidden;

  li {
    width: 50%;
    display: inline-block;
    line-height: 30px;
    margin-bottom: 10px;
    padding: 0 10px;

    &:nth-of-type(odd) {
      border-right: solid 1px #ebeef5;
    }

    .li-inner {
      padding: 0 5px;

      p {
        border-bottom: solid 1px #ebeef5;
      }
    }

    &.w100 {
      width: 100%;
    }

    p {
      min-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span {
      width: 100px;
      display: block;
      color: #666;
      font-weight: normal;
      // padding-left: 10px;
    }
  }
}

.desc {
  padding: 10px 0;
}

.export-api {
  border-top: solid 1px #ebeef5;
  padding: 10px 0;
  margin-top: 20px;
}
</style>
<style></style>
